<template>
	<div class="login-page">
		<div class="login-container">
			<div class="left-banner">
				<img src="@/assets/image/login-banner.jpg" />
			</div>
			<div class="login-content">
				<div class="system-name">报价系统管理平台</div>
				<div class="login-item">
					<div class="label">登录账号</div>
					<div class="input-box">
						<Icon size="30">
							<UserEdit />
						</Icon>
						<input
							type="text"
							v-model="form.username"
							placeholder="手机号或账号" />
					</div>
				</div>
				<div class="login-item">
					<div class="label">登录密码</div>
					<div class="input-box">
						<Icon size="30">
							<Password16Filled />
						</Icon>
						<input
							type="password"
							v-model="form.password"
							placeholder="请输入密码" />
					</div>
				</div>

				<el-button
					class="login-btn"
					@click="login"
					type="primary">
					登录
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import api from "@/api";
import { userUserStore } from "@/pinia/user";
import { useRouter } from "vue-router";
import { setToken } from "@/utils/public";
import { UserEdit } from "@vicons/fa";
import { Password16Filled } from "@vicons/fluent";

const USER = userUserStore();
const router = useRouter();

const form = ref({
	username: "blue2024",
	password: "blue2024",
	type: "1",
	platform: "CMS",
});

const login = async () => {
	const msg = await api.user.login(form.value);
	USER.setUserInfo(msg.data);
	setToken(msg.data);
	router.replace("/");
};
</script>

<style scoped lang="less">
.login-page {
	width: 100%;
	height: 100%;
	padding: 0 40px;
	box-sizing: border-box;
	overflow: overlay;
	display: flex;
	background-color: white;
	.login-container {
		flex: 1;
		margin: auto;
		max-width: 1000px;
		display: flex;
		justify-content: space-between;
		height: 600px;
		flex-shrink: 0;

		.left-banner {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 100%;
			}
		}
		.login-content {
			width: 400px;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.system-name {
				font-size: 34px;
				color: var(--text-color-dark);
				letter-spacing: 1px;
				margin-bottom: 70px;
			}
			.login-item {
				margin-bottom: 38px;
				.label {
					font-weight: bold;
					color: var(--text-color-dark);
					margin-bottom: 20px;
				}
				.input-box {
					width: 100%;
					height: 60px;
					display: flex;
					align-items: center;
					padding: 0 20px;
					box-sizing: border-box;
					background-color: var(--bg-gray);
					border-radius: var(--radius-base);
					span {
						color: #b4b7bc;
						font-size: 24px;
					}
					input {
						margin-left: 20px;
						height: 100%;
						width: 100%;
					}
				}
			}
			.login-btn {
				height: 50px;
			}
		}
	}
}
</style>
